<template>
    <div class="one-w">
        <div class="one">

            <input type="text" class="one-q" v-model="qiuhe1">
            <div class="one-qq">+</div>
            <input type="text" class="one-qqq" v-model="qiuhe2">
            <div class="one-qqqq">=</div>
            <div class="one-qqqqq">{{ qiuhe3 }}</div>
        </div>
        <div class="two-q" @click="goSum()">计算</div>
    </div>
</template>

<script>
export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {},
    /* 2. Vue数据 */
    props: {},
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {
            qiuhe1: '',
            qiuhe2: '',
            qiuhe3: '',
        };
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created() { },
    mounted() { },
    destroy() { },
    /* 5. Vue方法 */
    methods: {
        goSum() {
            this.qiuhe3 = +this.qiuhe1 + (+this.qiuhe2)
        },
    }
};
</script>


<style scoped lang="scss">
.one-w {

    .one {
        display: flex;
        justify-content: center;
        margin-top: 50px;

        .one-q {
            height: 30px;
            width: 80px;
            border: 1px solid;
        }

        .one-qqq {
            height: 30px;
            width: 80px;
            border: 1px solid;
        }

        .one-qqqqq {
            width: 80px;
            border: 1px solid;
        }

        .one-qq {
            line-height: 30px;
        }

        .one-qqqq {
            line-height: 30px;
        }
    }

    .two-q {
        text-align: center;
        border-radius: 10px;
        height: 40px;
        width: 100px;
        border: 1px solid;
        text-align: center;
        line-height: 40px;
        bottom: 10px;
        position: fixed;
        left: 50%;
        transform: translateX(-50px);
    }
}</style>